<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/demo_table.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-no-ajax.js"></script>
<script type="text/javascript" src="scripts/jquery.pajinate.js"></script>

<script type="text/javascript">
	function split(val) {
		return val.split(/,\s*/);
	}
	function extractLast(term) {
		return split(term).pop();
	}
	//var myList = [{"id":"9","name":"product3","price":7000.0,"desc":"des5","m_id":"2"},{"id":"1","name":"product1","price":1000.0,"desc":"desc1","m_id":"1"},{"id":"2","name":"product2","price":2000.0,"desc":"desc2","m_id":"1"},{"id":"3","name":"product3","price":3000.0,"desc":"desc3","m_id":"2"},{"id":"4","name":"product4","price":4000.0,"desc":"desc4","m_id":"2"},{"id":"5","name":"Doctor thanh","price":3333.0,"desc":"1","m_id":"1"}];
	
	$(function() {
		var searchType = 0;
		$("#searchWithoutSuggestion").hide();
		$("#autoCompleteManuName2").hide();
		$("#autoCompleteProductName2").hide();
		$("#searchWithSuggestion").click(function() {
			searchType = 1;
			$("#autoCompleteManuName1").hide();
			$("#autoCompleteManuName2").show();
			$("#autoCompleteProductName1").hide();
			$("#autoCompleteProductName2").show();
			$(this).hide();
			$("#searchWithoutSuggestion").show();
			var manuName = $("#autoCompleteManuName1").val();
			$("#autoCompleteManuName2").val(manuName);
			var productName = $("#autoCompleteProductName1").val();
			$("#autoCompleteProductName2").val(productName);
			
		});
		$("#searchWithoutSuggestion").click(function() {
			searchType = 0;
			$("#autoCompleteManuName2").hide();
			$("#autoCompleteManuName1").show();
			$("#autoCompleteProductName2").hide();
			$("#autoCompleteProductName1").show();
			$(this).hide();
			$("#searchWithSuggestion").show();
			var manuName = $("#autoCompleteManuName2").val();
			$("#autoCompleteManuName1").val(manuName);
			var productName = $("#autoCompleteProductName2").val();
			$("#autoCompleteProductName1").val(productName);
		});
		
		//$('#search').focus();
		$("#autoCompleteManuName2").autocomplete({
			source : function(request, response) {
				$.getJSON("/MAP/PagesUI/getNameManuList", {
					term : extractLast(request.term)
				}, response);
			},
			search : function() {
				// custom minLength
				var term = extractLast(this.value);
				if (term.length < 1) {
					return false;
				}
			},
			focus : function() {
				// prevent value inserted on focus
				return false;
			},
			select : function(event, ui) {
				var terms = split(this.value);
				// remove the current input
				terms.pop();
				// add the selected item
				terms.push(ui.item.value);
				// add placeholder to get the comma-and-space at the end
				terms.push("");
				this.value = terms.join(", ");
				return false;
			}
		});
		
		$("#autoCompleteProductName2").autocomplete({
			source : function(request, response) {
				$.getJSON("/MAP/PagesUI/getNameProductList", {
					term : extractLast(request.term)
				}, response);
			},
			search : function() {
				// custom minLength
				var term = extractLast(this.value);
				if (term.length < 1) {
					return false;
				}
			},
			focus : function() {
				// prevent value inserted on focus
				return false;
			},
			select : function(event, ui) {
				var terms = split(this.value);
				// remove the current input
				terms.pop();
				// add the selected item
				terms.push(ui.item.value);
				// add placeholder to get the comma-and-space at the end
				terms.push("");
				this.value = terms.join(", ");
				return false;
			}
		});
		
		$('#searchBtn').click(function() {
			var strPrice = "";
			if ($("#check1").is(":checked")) {
					strPrice += "0~3000,";
			}
			if ($("#check2").is(":checked")) {
					strPrice += "3000~5000,";
			}
			if ($("#check3").is(":checked")) {
					strPrice += "5000~10000,";
			}
			if ($("#check4").is(":checked")) {
					strPrice += "10000,";
			}
			var strManufactureName;
			var strProductName
			if(searchType == 0){
				strManufactureName = $("#autoCompleteManuName1").val();
				strProductName = $("#autoCompleteProductName1").val();
				alert(strPrice+"-"+strManufactureName+"-"+strProductName);
			}else{
				strManufactureName = $("#autoCompleteManuName2").val();
				strProductName = $("#autoCompleteProductName2").val();
				alert(strPrice+"-"+strManufactureName+"-"+strProductName);
			}
			
			//alert(strPrice + strManufactureName + strProductName);
			var infoSearch = new Object();
				infoSearch.manufactureName = strManufactureName;
				infoSearch.productName = strProductName;
				infoSearch.price = strPrice;
				$('form').css({backgroundImage : 'url(' + 'images/search_loading.gif' + ')', 'background-repeat': 'no-repeat'});
				$('form').css('background-position', 'center');
				//$("form").css("background-size":"100%");
				//$("body").css('background-image', 'images/backgroundbelieve.JPG');
				$.ajax({
			         type: "POST",
			         url: "searchProduct",
			         contentType : "application/json",
			         data: JSON.stringify(infoSearch),
			         success : function(data) {
			        	if(data == ""){
			        		$('form').css({backgroundImage : 'url(' + 'white_background.JPG' + ')', 'background-repeat': 'no-repeat'});
			        		alert("Ko tim thay");
			        	}			        	
			        	var listData=JSON.parse(data);
			        	var columnSet = [];
			        	$('thead').empty();
			        	$('tbody').empty();
			        	$('form').css({backgroundImage : 'url(' + 'white_background.JPG' + ')', 'background-repeat': 'no-repeat'});
			     		var headerTr$ = $('<tr class="gradeX"/>');
			     		for (var i = 0 ; i < listData.length ; i++) {
			     			var rowHash = listData[i];
			         		for (var key in rowHash) {
			             		if ($.inArray(key, columnSet) == -1){
			                 		columnSet.push(key);
			                 		if(key == "id" || key == "m_id"){
			                 			headerTr$.append($('<th  style="display: none;"/>').html(key));
			                 		}else{
			                 			headerTr$.append($('<th/>').html(key));
			                 		}	
			             		}
			         		}
			    		}
			     		$("thead").append(headerTr$);
			     		var columns = columnSet;
			     		for (var i = 0 ; i < listData.length ; i++) {
			        		var row$ = $('<tr class="gradeA" />');
			         		for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
			             		var cellValue = listData[i][columns[colIndex]];
			    					if (cellValue == null) { cellValue = ""; }
			    						row$.append($('<td/>').html(cellValue));
			         		}
			    					$("tbody").append(row$);
			     		}
			     		$("td:last-child").hide();
			     		$("td:first-child").hide();
			    		//$('#mytbody td:nth-child(3)').hide();
			    		$("th").css('background-color','#4282c3');
			    		$("tr:even").css('background-color','#e3ecf4');
			     		$("tr:odd").css('background-color','#FFD9BF');
			     		$('#result').pajinate({
			                num_page_links_to_display : 3,
			                items_per_page : 5,
			                nav_label_first : '<<',
			                nav_label_last : '>>',
			                nav_label_prev : '<',
			                nav_label_next : '>'
			            });
			        	
			         },
			         error: function (request, status, error) {
			             alert(error);
				         }
			    });
		});
	});
	$(document).ajaxComplete(function() {
		var colorow;
		$(".content").delegate("tr", "click", function() {
			colorow = $(this);
			$("tr:odd").css('background-color','#FFD9BF');
			$("tr:even").css('background-color','#e3ecf4');
			$("th").css('background-color','#4282c3');
			$(colorow).css('background-color','#a7d3ff');
			var colorPre = $(this).css('backgroundColor');
		});
	});
</script>
</head>
<body>
	<div id="container-2">
		<div style="padding: 10px;">
			<h3>Product search:&nbsp;&nbsp; <input id="searchWithSuggestion" type="button"
				value="Search with suggestion"><input
				id="searchWithoutSuggestion" type="button"
				value="Search without suggestion"></h3>
			
			<div id="search1">
				<label>Manufacture Name : </label> <input type="text"
					id="autoCompleteManuName1" placeholder="Search Manufacture"
					style="border: thin #CCCCCC solid; font-size: 12pt;"> <input type="text"
					id="autoCompleteManuName2"
					style="border: thin #CCCCCC solid; font-size: 12pt;"> <label>Product
					Name : </label> <input type="text" name="autoCompleteProductName" placeholder="Search Product"
					id="autoCompleteProductName1"
					style="border: thin #CCCCCC solid; font-size: 12pt;"> <input type="text" name="autoCompleteProductName"
					id="autoCompleteProductName2"
					style="border: thin #CCCCCC solid; font-size: 12pt;"><input
					type="button" name="searchBtn" id="searchBtn" value="Search">
				<img src="images/excel-icon.png" id="xlsExport" alt="Export XLS">
				<img src="images/pdf-icon.png" id="pdfExport" alt="Export PDF">
				<form>
					<label>Price:</label><br> <input type="checkbox"
						id="check1" name="vehicle" value="<3000"><3000<br> <input
						type="checkbox" id="check2" name="vehicle" value="3000~5000">3000~5000<br>
					<input type="checkbox" id="check3" name="vehicle" value="<5000~10000">5000~10000<br>
					<input type="checkbox" id="check4" name="vehicle" value=">10000">>10000<br>
				</form>
			</div>
			<h3>Result: </h3>
			 <div id="result">
                <div class="page_navigation"></div>
                <table class="display" id="excelDataTable">
					<thead>
						<tr>
						<th>Matched Data</th>
						</tr>
					</thead>
					<tbody class="content">	   
					</tbody>
				</table>
				<div class="info_text"></div>
            </div>
		</div>
	</div>
</body>
</html>